<template>
	<view class="">
		<Header :title="title" :isHome="true" :isWhite='true' :bgColor="'transparent'"></Header>
		<view class="topBg">
			<image src="/static/bg1.png" mode="" class="">
			</image>
			<view class="title">
				<image src="/static/top10.png" mode="" class="topTitle"></image>
			</view>
			<view class="topThree">
				<view class="top2">

					<view class="">
						<image src="/static/avator.png" v-if="!list[1].user.avatar&&list[1].user&&list[1]" mode="" class="avator"></image>
						<image :src="img_url+list[1].user.avatar" v-else mode="" class="avator"></image>
					</view>
					<view class="name" v-if="list.length>1&&list[1].user.childrenname">
						{{list[1].user.childrenname}}
					</view>
					<view class="name" v-else-if="list.length>1&&!list[1].user.childrenname">
						{{list[1].user.mobile}}
					</view>
					<view class="name" v-else-if="list.length<=1">
						-
					</view>
					<view class="">
						<image src="/static/t2.png" mode="" class="topLogo"></image>
					</view>
					<view class="score" v-if="list.length>1">
						<!-- {{list[1].score}}分 -->
						<span v-if="info.module_id==3||info.module_id==2">{{list[1].number}}题</span>
						<span v-else>{{list[1].score}}分</span>
					</view>
					<view class="score" v-if="list.length<=1">
						-
					</view>
				</view>
				<view class="top1">
					<view class="">
						<image src="/static/avator.png" v-if="!list[0].user.avatar&&list[0].user&&list[0]" mode="" class="avator"></image>
						<image :src="img_url+list[0].user.avatar" v-else mode="" class="avator"></image>
					</view>
					<view class="name" v-if="list.length>0&&list[0].user.childrenname">
						{{list[0].user.childrenname}}
					</view>
					<view class="name" v-else-if="list.length>0&&!list[0].user.childrenname">
						{{list[0].user.mobile}}
					</view>
					<view class="name" v-else-if="list.length==0">
						-
					</view>
					<view class="">
						<image src="/static/t1.png" mode="" class="topLogo"></image>
					</view>
					<view class="score" v-if="list.length>0">
						<!-- {{list[0].score}}分 -->
						<span v-if="info.module_id==3||info.module_id==2">{{list[0].number}}题</span>
						<span v-else>{{list[0].score}}分</span>
					</view>
					<view class="score" v-if="list.length==0">
						-
					</view>
				</view>
				<view class="top3">
					<view class="">
						<image src="/static/avator.png" v-if="!list[2].user.avatar&&list[2].user&&list[2]" mode="" class="avator"></image>
						<image :src="img_url+list[2].user.avatar" v-else mode="" class="avator"></image>
					</view>
					<view class="name" v-if="list.length>2&&list[2].user.childrenname">
						{{list[2].user.childrenname}}
					</view>
					<view class="name" v-else-if="list.length>2&&!list[2].user.childrenname">
						{{list[2].user.mobile}}
					</view>
					<view class="name" v-else-if="list.length<=2">
						-
					</view>
					<view class="">
						<image src="/static/t3.png" mode="" class="topLogo"></image>
					</view>
					<view class="score" v-if="list.length>2">
						<!-- {{list[2].score}}分 -->
						<span v-if="info.module_id==3||info.module_id==2">{{list[2].number}}题</span>
						<span v-else>{{list[2].score}}分</span>
					</view>
					<view class="score" v-if="list.length<=2">
						-
					</view>
				</view>
			</view>
		</view>
		<view class="flex" v-for="(item,index) in rankingList" v-if="list.length>3">

			<view class="" style="display: flex;align-items: center;">
				<view class="num">
					{{index+4}}
				</view>
				<image src="/static/avator.png" v-if="!item.user.avatar" mode="" class="avator1"></image>
				<image :src="img_url+item.user.avatar" v-else mode="" class="avator1"></image>
				<view class="name" v-if="item.user.childrenname">{{item.user.childrenname}}</view>
				<view class="name" v-else>{{item.user.mobile}}</view>
			</view>

			<view class="">
				<image src="/static/score.png" mode="" class="score"></image>
				<!-- <span>{{item.score}}分</span> -->
				<span v-if="info.module_id==3||info.module_id==2">{{item.number}}题</span>
				<span v-else>{{item.score}}分</span>
			</view>
		</view>
		<view class="" style="text-align: center;" v-if="list.length<=3">
			<image src="/static/none.png" mode="" class="noneLogo"></image>
			<view class="none">
				暂无排行
			</view>
		</view>
	</view>
</template>

<script>
	import {
		get,
		post,
		img_url
	} from '../../utils/request'
	export default {
		data() {
			return {
				img_url:img_url,
				id: '',
				title: '同步练排行榜',
				info: {},
				list: [],
				rankingList: []
			}
		},
		onLoad(opt) {

			// if (opt.id) {
			// 	this.id = opt.id
			// 	this.getRanking() // 同步排行榜
			// }
			if (opt.info) {
				this.info = JSON.parse(opt.info)
				if (this.info.module_id == 1) {
					this.title = '同步练排行榜'
				} else if (this.info.module_id == 2) {
					this.title = '基础训练排行榜'
				} else if (this.info.module_id == 3) {
					this.title = '错题训练排行榜'
				} else if (this.info.module_id == 4) {
					this.title = '单元测试排行榜'
				}
				this.getRankings() // 排行榜
			}

		},
		methods: {
			// getRanking() {
			// 	get('/paper/refresh_ranking?as_id=' + this.id).then(res => {
			// 			this.list = res.data
			// 			this.rankingList = this.list.slice(3);
			// 		})
			// 		.catch(err => {
			// 			console.error('GET 请求失败:', err);
			// 		});
			// },
			getRankings() {
				get('/paper/ranking?module_id=' + this.info.module_id + '&subject_id=' + this.info.subject_id +
						'&grade_id=' + this.info.grade_id).then(res => {
						this.list = res.data
						this.rankingList = this.list.slice(3);
					})
					.catch(err => {
						console.error('GET 请求失败:', err);
					});

			}
		}
	}
</script>

<style lang="scss" scoped>
	.noneLogo {
		width: 240rpx;
		height: 240rpx;
		margin: 50rpx auto 0;
		display: block;
	}

	.none {
		font-family: PingFangSC-SNaNrpxibold;
		font-weight: 600;
		font-size: 32rpx;
		color: #1A1A1A;
	}

	.topBg {
		width: 100%;
		height: 800rpx;
		position: relative;
		top: -88px;

		image {
			width: 100%;
			height: 100%;
		}

		// .title {
		// 	font-family: AlibabaPuHuiTiH;
		// 	font-size: 76rpx;
		// 	color: #1A1A1A;
		// 	position: absolute;
		// 	top: 220rpx;
		// 	left: 120rpx;
		// 	font-weight: bold;
		// }
		.topTitle {
			width: 590rpx;
			height: 104rpx;
			display: block;
			position: absolute;
			top: 220rpx;
			left: 100rpx;
		}

		.topThree {
			display: flex;
			justify-content: space-around;
		}

		.top1 {
			width: 195rpx;
			height: 380rpx;
			text-align: center;
			padding: 28rpx 0;
			box-sizing: border-box;
			background: url(/static/top1.png) no-repeat center center / cover;
			position: absolute;
			bottom: -98rpx;
		}

		.top2 {
			width: 195rpx;
			height: 380rpx;
			text-align: center;
			padding: 28rpx 0;
			box-sizing: border-box;
			background: url(/static/top2.png) no-repeat center center / cover;
			position: absolute;
			bottom: -140rpx;
			left: 30rpx;
		}

		.top3 {
			width: 195rpx;
			height: 380rpx;
			text-align: center;
			padding: 28rpx 0;
			box-sizing: border-box;
			background: url(/static/top3.png) no-repeat center center / cover;
			position: absolute;
			bottom: -140rpx;
			right: 30rpx;
		}

		.avator {
			width: 96rpx;
			height: 96rpx;
			border-radius: 50%;
		}

		.topLogo {
			width: 58rpx;
			height: 68rpx;
		}

		.name {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 28rpx;
			color: #1A1A1A;
			margin-bottom: 20rpx;
		}

		.score {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 40rpx;
			color: #1A1A1A;

		}
	}

	.flex {
		width: 686rpx;
		height: 116rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 33rpx;
		background: #fff;
		border: 3rpx solid #D6D6D6;
		border-radius: 12rpx;
		margin: 30rpx auto;

		.avator1 {
			width: 68rpx;
			height: 68rpx;
		}

		.num {
			width: 44rpx;
			height: 44rpx;
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 28rpx;
			color: #1A1A1A;
			background: #d6d6d6;
			border-radius: 50%;
			text-align: center;
			line-height: 44rpx;
			margin-right: 40rpx;
		}

		.name {
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 28rpx;
			color: #1A1A1A;
			margin-left: 40rpx;
		}

		.score {
			width: 32rpx;
			height: 30rpx;
			margin-right: 20rpx;
		}
	}
</style>